
<template>
  <div class="myBottom">
    <div style="display: flex;justify-content: center;align-items: center;height: 70px">
      <p>
        <svg style="margin-bottom: -11px;margin-right: 5px" t="1718523559661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4276" width="32" height="32"><path d="M813.3 749.3H216.7c-48.2 0-87.6-39.4-87.6-87.6V268.2c0-48.2 39.4-87.6 87.6-87.6h596.6c48.2 0 87.6 39.4 87.6 87.6v393.5c-0.1 48.1-39.6 87.6-87.6 87.6z" fill="#635DF7" opacity=".7" p-id="4277"></path><path d="M499.5 619L300 818.4c-12.8 12.8-3.8 34.9 14.4 34.9h400.9c18.2 0 27.4-22.1 14.3-35L528.3 618.9c-8-7.9-20.9-7.9-28.8 0.1z" fill="#635DF7" opacity=".7" p-id="4278"></path><path d="M308.5 594.6c-10.2 0-20.5-3.9-28.3-11.7-15.6-15.6-15.6-40.9 0-56.6l133.2-133.2c15.6-15.6 40.9-15.6 56.6 0l85.8 85.8 137.4-137.4c15.6-15.6 40.9-15.6 56.6 0 15.6 15.6 15.6 40.9 0 56.6L584 563.8c-15.6 15.6-40.9 15.6-56.6 0L441.6 478 336.7 582.9c-7.8 7.8-18 11.7-28.2 11.7z" fill="#FFFFFF" p-id="4279"></path></svg>
        <span style="color: #c60aef">本站已稳定运行 {{days}} 天 {{hours}} 小时 {{minutes}} 分钟 {{seconds}} 秒</span>
      </p>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;height: 10px">
      <p>
        <span style="font-family: 华文楷体;font-size: 16px">
          Copyright©2022-2024 小罗博客鄂ICP备2024001639号-2
        </span>
      </p>
    </div>
    <div style="display: flex;justify-content: center;align-items: center;height: 65px">
      <p>
        <span>
          <svg style="margin-bottom: -7px;margin-right: 10px; " t="1718532079626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5398" width="20" height="20"><path d="M647.172096 480.3072a219.4432 219.4432 0 1 0-270.336 0 371.3536 371.3536 0 0 0-230.5536 344.4736v74.24a36.8128 36.8128 0 0 0 36.5568 36.9664h658.2784a36.8128 36.8128 0 0 0 36.5568-36.9664v-74.24A371.3024 371.3024 0 0 0 647.172096 480.256z m219.5456-13.3632a186.88 186.88 0 0 0 47.5648-124.5184 184.4224 184.4224 0 0 0-182.8864-185.5488c-3.0208 0-5.8368 0.768-8.8064 0.9216 15.9744 23.552 28.0064 49.5616 35.584 77.0048h-0.3584a247.3984 247.3984 0 0 1-49.7664 242.3808c16.6912 7.5776 205.824 87.2448 205.824 347.5456h73.5744a36.9664 36.9664 0 0 0 36.5568-36.9664v-57.4976a296.192 296.192 0 0 0-157.2864-263.3216z m-551.1168 10.24a247.3984 247.3984 0 0 1-49.8176-242.3296 259.9936 259.9936 0 0 1 35.584-77.056c-2.816 0-5.632-0.9216-8.8064-0.9216a184.4224 184.4224 0 0 0-182.8352 185.5488c0 45.9264 16.896 90.2656 47.5648 124.5184A296.0896 296.0896 0 0 0 0.004096 730.2656v57.3952a36.8128 36.8128 0 0 0 36.5568 36.9664h73.1648c0-260.1472 189.184-339.8656 205.824-347.4432z" fill="#E3454F" p-id="5399"></path></svg>
          <el-button size="small"  style="margin-right: 70px;" type="success" round>访问量：{{guest}}</el-button>

          <svg style="margin-bottom: -7px;margin-right: 10px;" t="1718532154336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6452" width="20" height="20"><path d="M364.245333 737.450667c-0.213333-34.752 5.333333-69.312 16.426667-102.4a331.456 331.456 0 0 1 46.08-88.874667 355.52 355.52 0 0 1 70.357333-71.68c26.794667-21.333333 56.874667-38.613333 89.194667-51.221333 2.154667-4.864 3.498667-9.472 6.741333-17.152l4.842667-13.077334c0.789333-3.925333 1.962667-7.786667 3.52-11.52a51.2 51.2 0 0 0 17.770667-10.24c5.504-5.12 10.069333-11.093333 13.482666-17.664 4.309333-9.962667 6.954667-20.501333 7.808-31.232a87.637333 87.637333 0 0 0 0-25.6 57.344 57.344 0 0 0-6.464-16.405333 35.477333 35.477333 0 0 0-10.773333-11.52 651.541333 651.541333 0 0 0-4.864-73.237333 419.136 419.136 0 0 0-16.426667-66.56 178.538667 178.538667 0 0 0-36.117333-59.669334 154.453333 154.453333 0 0 0-29.376-25.6 280.32 280.32 0 0 0-42.837333-22.037333c-16.554667-6.4-33.578667-11.605333-50.944-15.616A246.997333 246.997333 0 0 0 388.778667 0c-15.146667 0.192-30.293333 1.386667-45.269334 3.584-16.192 2.176-32.021333 6.208-47.168 12.032a208.362667 208.362667 0 0 0-46.08 25.6 193.002667 193.002667 0 0 0-41.770666 40.213333 186.624 186.624 0 0 0-29.376 59.669334c-6.016 20.501333-10.602667 41.386667-13.738667 62.464-2.154667 23.04-3.776 45.589333-3.776 68.373333a66.133333 66.133333 0 0 0-12.394667 18.944 75.392 75.392 0 0 0-5.674666 22.549333c-0.469333 9.408 0.725333 18.837333 3.52 27.904 2.090667 8.597333 6.037333 16.704 11.584 23.808 3.541333 4.821333 7.701333 9.216 12.394666 13.056 4.373333 2.453333 8.96 4.522667 13.738667 6.144 2.986667 9.472 6.464 18.965333 9.173333 27.925334 2.922667 7.936 6.528 15.658667 10.773334 23.04 3.2 6.762667 7.872 12.8 13.738666 17.664 10.794667 8.704 20.757333 17.152 29.376 25.6 9.066667 9.152 14.506667 21.013333 15.36 33.557333v25.6c-0.277333 7.722667-1.92 15.338667-4.842666 22.528a82.069333 82.069333 0 0 1-15.914667 22.549333 150.890667 150.890667 0 0 1-30.976 23.04 193.194667 193.194667 0 0 1-37.461333 16.896c-13.482667 4.864-26.944 8.704-42.304 13.056l-43.136 12.032a209.386667 209.386667 0 0 0-37.184 17.92c-11.136 7.04-21.034667 15.68-29.376 25.6a79.786667 79.786667 0 0 0-15.893334 36.629334 321.92 321.92 0 0 0-4.309333 96.277333c-0.213333 16.213333 5.397333 32.021333 15.893333 44.8 8.405333 4.330667 17.514667 7.274667 26.944 8.725333 14.570667 2.816 32.341333 6.144 53.909334 8.704 21.546667 2.56 44.458667 6.144 70.336 8.704s51.733333 5.632 77.610666 7.424c25.877333 1.792 51.733333 3.328 76.266667 4.608 24.533333 1.28 46.08 2.048 64.682667 2.048h25.322666a354.261333 354.261333 0 0 1-35.562666-81.685333 314.944 314.944 0 0 1-12.949334-89.877333v-0.256z m635.989334-108.565334a295.146667 295.146667 0 0 0-64.661334-91.157333c-86.890667-82.176-217.472-106.261333-330.410666-60.949333-35.626667 14.293333-68.032 34.986667-95.381334 60.949333a292.138667 292.138667 0 0 0-64.682666 90.901333 268.8 268.8 0 0 0 0 220.992 294.421333 294.421333 0 0 0 64.682666 90.88 305.664 305.664 0 0 0 95.381334 60.949334A312.256 312.256 0 0 0 722.922667 1024c40.277333 0.213333 80.170667-7.381333 117.248-22.293333a301.866667 301.866667 0 0 0 95.402666-60.928 288.810667 288.810667 0 0 0 64.661334-90.901334 268.8 268.8 0 0 0 0-220.992z m-194.56 236.586667a45.653333 45.653333 0 0 1-31.786667-12.8l-89.749333-86.784a42.197333 42.197333 0 0 1-13.226667-30.485333v-172.074667c0-23.530667 20.096-42.624 44.885333-42.624 24.789333 0 44.864 19.093333 44.864 42.624v153.642667l76.544 73.749333a42.005333 42.005333 0 0 1 0 61.205333c-8.298667 8.106667-19.626667 12.714667-31.530666 12.8v0.768z" fill="#EC695A" p-id="6453"></path></svg>
          <el-button size="small"  type="success" round>访客量：{{visitor}}</el-button>
        </span>
      </p>
    </div>
  </div>
</template>
<script setup >
import {onMounted,ref} from "vue";

const timeNum = ref()
const days = ref()
const hours = ref()
const minutes = ref()
const seconds = ref()
const guest = ref()
const visitor = ref()
const beginTime = ref(new Date("2023-01-01T12:00:00"))
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getNum(){
  guest.value = getRandomInt(1,100000)
  visitor.value = getRandomInt(1,100000)
}
//计算时间差
function convertMillisecondsToTimeUnits() {
  timeNum.value=timeNum.value+1000
  days.value = Math.floor(timeNum.value / (1000 * 60 * 60 * 24));
  hours.value = Math.floor((timeNum.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  minutes.value = Math.floor((timeNum.value % (1000 * 60 * 60)) / (1000 * 60));
  seconds.value = Math.floor((timeNum.value % (1000 * 60)) / 1000);
}
// 设置定时器，每1000毫秒（1秒）执行一次timerFunction
onMounted(()=>{
  timeNum.value = new Date().getTime()-beginTime.value.getTime()
  //convertMillisecondsToTimeUnits()
  setInterval(convertMillisecondsToTimeUnits, 1000);
})
getNum()
</script>
<style scoped>
.myBottom{
  /*position: fixed;*/
  bottom: 0;
  width: 100%;
  --el-footer-padding: 0 0px;
  --el-footer-height: 130px;
  background-color: #364f6b;
}
</style>